import {useState} from 'react';
import {connect} from "react-redux";
import Taro, {useDidShow} from "@tarojs/taro";
import {ConfigProvider, Picker, InputNumber, Input} from "@nutui/nutui-react-taro";
import {View, Text} from '@tarojs/components'
import {AtButton, AtIcon, AtInput, AtTextarea} from "taro-ui";
import request from '../../../service/api';

import './index.less';


function Withdraw(props) {
    const {balance, dispatch} = props;
    useDidShow(() => {
        dispatch({
            type: 'wallet/findUserLoadingOrder'
        })
    })
    console.log('balance', balance);
    const [value, setValue] = useState('')
    const [loading, setLoading] = useState(false);
    const [pickerVisible, setPickerVisible] = useState(false);
    const [reason, setReason] = useState(1);
    const [reasonContent, setReasonContent] = useState('');
    const reasonList = [
        {value: 1, text: '充值过多'},
        {value: 2, text: '不再使用/去其他城市'},
        {value: 3, text: '充电体验不好'},
        {value: 4, text: '其他'}
    ]
    // const balance = 0.02;
    const confirmPicker = (opts, values) => {
        setReason(values[0] - 0)
    };
    return (
        <View className='rechargeWrap'>
            <View className='chargeOption'>
                <View>退款金额</View>
                <View
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        background: '#fff',
                        padding: '0 10px',
                        fontSize: '28rpx'
                    }}
                >
                    <View style={{fontWeight: 'bold', fontSize: '38rpx'}}>¥</View>
                    <Input
                        name='value'
                        title='¥'
                        type='digit'
                        min={0}
                        value={value}
                        placeholder='请输入退款金额'
                        onChange={e => {
                            setValue(e)
                            // if (parseFloat(e) > balance){
                            //     setValue(balance.toFixed(3) - 0)
                            // } else {
                            //     setValue(e)
                            // }
                        }}
                    />
                    {/*<AtInput*/}
                    {/*  name='value'*/}
                    {/*  title='¥'*/}
                    {/*  type='digit'*/}
                    {/*  placeholder='请输入退款金额'*/}
                    {/*  value={value}*/}
                    {/*  onChange={e => {*/}
                    {/*      setValue(e)*/}
                    {/*      // if (parseFloat(e) > balance){*/}
                    {/*      //     setValue(balance.toFixed(3) - 0)*/}
                    {/*      // } else {*/}
                    {/*      //     setValue(e)*/}
                    {/*      // }*/}
                    {/*  }}*/}
                    {/*  // maxLength={5}*/}
                    {/*/>*/}
                </View>
                <View
                    className='chargeBtns'
                    style={{
                        marginTop: '28rpx',
                        paddingBottom: '28rpx',
                        borderBottom: '1rpx solid #EBF3FE'
                    }}
                >
                    <View>钱包余额 <Text
                        style={{color: '#EF011E', fontWeight: 'bold'}}>¥ {balance.toFixed(2)}</Text></View>
                    <View style={{color: '#0091FF'}} onClick={() => setValue(balance)}>全部提现</View>
                </View>
                <View className='chargeBtns' style={{marginTop: '28rpx'}}>
                    <View>退款原因</View>
                    <View onClick={() => setPickerVisible(true)}>
                        {reasonList.find((i) => i.value === reason)?.text}
                        <AtIcon value='chevron-right' size='20'/>
                    </View>
                </View>
                <View
                    style={{
                        marginTop: '14px',
                        paddingTop: '28rpx',
                        paddingBottom: '28rpx',
                        borderTop: '1rpx solid #EBF3FE'
                    }}
                >
                    <View>退款说明</View>
                    <View>
                        <AtTextarea
                            name='reason'
                            value={reasonContent}
                            placeholder='选填'
                            onChange={e => setReasonContent(e)}
                            maxLength={50}
                        />
                    </View>
                </View>
            </View>
            <View className='integralNote'>
                *注: 如果您充值时使用了优惠券/代金券等,可能导致无法正常退款。
            </View>
            <View className='pageFooter'>
                <AtButton
                    disabled={!value || parseFloat(value) <= 0 || loading}
                    // disabled
                    loading={loading}
                    onClick={() => {
                        setLoading(true)
                        const openid = Taro.getStorageSync('openid');
                        request.get('/system/order/findUserChargingOrder').then((RES) => {
                            const {data: {data: chargingOrder, code} = {}} = RES;
                            if (code === 200 && chargingOrder && Object.keys(chargingOrder).length) {
                                Taro.showToast({
                                    title: '您有正在进行充电的订单,暂无法退款....',
                                    icon: 'none',
                                    duration: 2000
                                });
                                setLoading(false)
                            } else {
                                setTimeout(() => {
                                    request.post(
                                        '/jgy-pay/mini/hf/order-pay/createRefundOrder',
                                        {
                                            cause: reasonList.find((i) => i.value === reason)?.text,
                                            openid: openid,
                                            remark: reasonContent,
                                            refundAmount: parseFloat(value)
                                        },
                                        true
                                    ).then((res) => {
                                        console.log('退款回调', res);
                                        const {statusCode, data: {code, msg = ''} = {}} = res;
                                        if (statusCode === 200 && code === 200) {
                                            Taro.showToast({
                                                title: '申请成功',
                                            });
                                            setLoading(false)
                                            setTimeout(() => {
                                                Taro.reLaunch({
                                                    url: '/pages/mine/index'
                                                })
                                            }, 1000)
                                        } else {
                                            Taro.showToast({
                                                title: msg ? msg : '申请失败',
                                                icon: 'none'
                                            });
                                            setLoading(false)
                                        }
                                    })
                                }, 200)
                            }
                        })
                    }}
                >{loading ? '申请中...' : '立即申请'}</AtButton>
            </View>
            <ConfigProvider theme={{nutuiPickerOkColor: '#0091FF'}}>
                <Picker
                    visible={pickerVisible}
                    options={[reasonList]}
                    duration={1000}
                    onConfirm={(list, values) => confirmPicker(list, values)}
                    onClose={() => setPickerVisible(false)}
                />
            </ConfigProvider>
        </View>
    )
}

export default connect(({wallet}) => {
    return {...wallet}
})(Withdraw)
